// ---------------------------------------------------------------------------
//  Color Picker/extensions: Format
// ---------------------------------------------------------------------------

    @size-format: 22px;

    &-format {
        background: #c0c0c0;
        width: 100%; height: @size-format + 1px;
        border-radius: 1px;
        position: absolute;
        top: auto; bottom: -@size-format;
        display: flex;

        backface-visibility: hidden;

    // -------------------------------------
    //  : `is flipped` modifier
    // -------------------------------------
        .is--flipped & {
            top: -@size-format; bottom: auto; }

    // -------------------------------------
    //  : `view definition` modifier
    // -------------------------------------
        .view--definition & {
            display: none; }

    // -------------------------------------
    //  conversion button
    // -------------------------------------
        &-button {
            background: #d6d6d6;
            width: 100%; height: 100%;
            font-size: 9px;
            color: #777;
            line-height: @size-format;
            text-shadow: 0 1px #e7e7e7;
            margin-right: 1px;
            border: 0;
            border-radius: 1px;
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, .3),
                inset 0 2px 0 #c3c3c3;
            -webkit-appearance: none;

            &:last-child { margin-right: 0; }
            &:hover { background: #ddd; }

        //  : `is flipped` modifier
        // ---------------------------
            .is--flipped & {
                box-shadow:
                    inset 0 0 0 1px rgba(255, 255, 255, .3),
                    inset 0 -2px 0 #c3c3c3;
            }

        //  : `is active` modifier
        // ---------------------------
            &.is--active {
                background: @color-base;
                color: #555;
                box-shadow: inset 0 1px 3px #fff;
                text-shadow: none;

                // : `is flipped` modifier
                .is--flipped & { box-shadow: inset 0 -1px 3px #fff; }
            }
        }
    }
